import React, {useState} from 'react';
import {Breadcrumb, Select} from 'antd';
import {Table, Tag, Space} from 'antd';

const {Option} = Select;
const allevent = {
    boxname: "1",
    event: "缺料"
}
const columns = [
    {
        title: '盒子名称',
        dataIndex: 'name',
        key: 'name',
        render: text => <a>{text}</a>,
    },
    {
        title: '所属产线',
        dataIndex: 'line',
        key: 'line',
    },
    {
        title: '按钮状态',
        key: '按钮状态',
        dataIndex: 'tags',
        render: tags => (
            <>
                {tags.map(tag => {
                    let color = tag.length > 5 ? 'geekblue' : 'green';
                    if (tag === allevent.event) {
                        color = 'volcano';
                    }
                    return (
                        <Tag color={color} key={tag}>
                            {tag.toUpperCase()}
                        </Tag>
                    );
                })}
            </>
        ),
    },
];

const data = [
    {
        key: '1',
        name: '按钮盒1',
        line: '产线1',
        tags: ['呼叫主管', '缺料', '品质异常', '设备异常'],
    },
    {
        key: '2',
        name: '按钮盒2',
        line: '产线2',
        tags: ['呼叫主管', '缺料', '品质异常', '设备异常'],
    },
    {
        key: '3',
        name: '按钮盒3',
        line: '产线2',
        tags: ['呼叫主管', '缺料', '品质异常', '设备异常'],
    },
];

function handleChange(value) {
    console.log(`selected ${value}`);
}

function Status(props) {

    return (
        <div>
            <Breadcrumb>
                <Breadcrumb.Item>设备管理</Breadcrumb.Item>
                <Breadcrumb.Item>状态监控</Breadcrumb.Item>
            </Breadcrumb>
            <div className="site-layout-background" style={{padding: 24, minHeight: 360}}>
                <Table columns={columns} dataSource={data} pagination={false}/>
            </div>
        </div>
    );

}

export default Status;
